<template>
  <div class="footer">
    <div class="app-container">
      <div class="footer-wrapper flex-start">
        <div class="footer-title flex-start">
          <img src="@/assets/images/shoplogo.svg" alt="" style="height: 38px;">
<!--          <p>Get More Coupons</p>-->
<!--          <div class="el-input">-->
<!--            <input type="text" autocomplete="off" placeholder="Your email address" class="el-input__inner">-->
<!--          </div>-->
<!--          <div class="sub"> Subscribe</div>-->
        </div>
        <div class="footer-nav">
          <div class="footer-nav-item">
            <span>{{$t('FooterTitle1')}}</span>
            <ul>
              <li class="el-tooltip" @click="handleClick('https://t.me/TG_164D1')">{{$t('FooterText1-1')}}</li>
              <li class="el-tooltip">
                <el-tooltip
                    class="box-item"
                    effect="light"
                    content="Top Left prompts info"
                    placement="left"
                >
                  <template #content>
                    <div> 企业邮箱: support@smwholesaleshop01.com <br> 企业邮箱2: support@smwholesaleshop02.com <br> 企业邮箱2: support@smwholesaleshop03.com </div>
                  </template>
                  {{$t('FooterText1-2')}}
                </el-tooltip>
              </li>
              <li class="el-tooltip" @click="handleClick('https://ml.thsjbvh.site/app.html')">{{$t('FooterText1-3')}}</li>
              <li class="el-tooltip" @click="handleClick('https://ml.thsjbvh.site/app.html')">{{$t('FooterText1-4')}}</li>
            </ul>
          </div>
          <div class="footer-nav-item">
            <span>{{$t('FooterTitle2')}}</span>
            <ul>
              <li class="el-tooltip" @click="handleClick('/privacyPolicy')">{{$t('FooterText2-1')}}</li>
              <li class="el-tooltip" @click="handleClick('/returnPolicy')">{{$t('FooterText2-2')}}</li>
              <li class="el-tooltip" @click="handleClick('/delivery')">{{$t('FooterText2-3')}}</li>
              <li class="el-tooltip" @click="handleClick('/shippingPolicy')">{{$t('FooterText2-4')}}</li>
            </ul>
          </div>
          <div class="footer-nav-item">
            <span>{{$t('FooterTitle3')}}</span>
            <ul>
              <li class="el-tooltip" @click="handleClick('/register')">{{$t('FooterText3-1')}}</li>
              <li class="el-tooltip" @click="handleClick('/mine/my-order')">{{$t('FooterText3-2')}}</li>
              <li class="el-tooltip" @click="handleClick('/mine/collect-goods')">{{$t('FooterText3-3')}}</li>
              <li class="el-tooltip" @click="handleClick('/mine/money-package')">{{$t('FooterText3-4')}}</li>
            </ul>
          </div>
          <div class="footer-nav-item">
            <span>{{$t('FooterTitle4')}}</span>
            <ul>
              <li class="el-tooltip" @click="handleClick('https://www.smsupermalls.com/about-us/')">{{$t('FooterText4-1')}}</li>
              <li class="el-tooltip" @click="handleClick('https://www.smprimecareers.com/')">{{$t('FooterText4-2')}}</li>
              <li class="el-tooltip" @click="handleClick('https://smstore.com/news-stories/')">{{$t('FooterText4-3')}}</li>
              <li class="el-tooltip" @click="handleClick('https://www.smsupermalls.com/')">{{$t('FooterText4-4')}}</li>
            </ul>
          </div>
        </div>
      </div>
      <div class="footer-wrapper">
        <div class="flex-start sec">
          <div class="payment">
            <div class="title-f">{{$t('FooterPayment')}}</div>
            <div class="payment-methods">
              <div class="pay" @click="handleClick('https://www.binance.com/zh-CN')">
                <img src=""
                  alt="">
                <span>Binance</span>
              </div>
              <div class="pay" @click="handleClick('https://www.htx.com/')">
                <img src=""
                  alt="">
                <span>Huobi</span>
              </div>
              <div class="pay" @click="handleClick('https://www.okx.com/zh-hans')">
                <img
                  src=""
                  alt="">
                <span>OKX</span>
              </div>
              <div class="pay" @click="handleClick('https://www.kraken.com/')">
                <img
                  src=""
                  alt="">
                <span>KraKen</span>
              </div>
              <div class="pay" @click="handleClick('https://www.coinbase.com/')">
                <img
                  src=""
                  alt="">
                <span>Coinbase</span>
              </div>
              <div class="pay" @click="handleClick('https://metamask.io/')">
                <img
                  src=""
                  alt="">
                <span>MetaMask</span>
              </div>
              <div class="pay" @click="handleClick('https://www.kucoin.com/')">
                <img
                  src=""
                  alt="">
                <span>KuCoin</span>
              </div>
              <div class="pay" @click="handleClick('https://www.bitfinex.com/')">
                <img
                  src=""
                  alt="">
                <span>Bitfinex</span>
              </div>
            </div>
          </div>
          <div class="argos">
            <div class="left">
              <div class="title">SM-wholesale shop</div>
              <div class="dec">{{$t('FooterTip')}}</div>
            </div><!---->
          </div>
        </div>
        <div class="sec-img just-img">
          <img
            src=""
            alt="" @click="handleClick('https://www.smsupermalls.com/')">
          <img
            src=""
            alt="" @click="handleClick('https://www.habitat.co.uk/')">
          <img
            src=""
            alt="" @click="handleClick('https://www.nectar.com/')">
          <img
            src=""
            alt="" @click="handleClick('https://crypto.com/')">
          <img src="@/assets/images/footer-zd.png" alt="" @click="handleClick('https://www.sc.com/en/')">
          <img
            src=""
            alt="" @click="handleClick('https://www.zellepay.com/')">
        </div>
      </div>
      <div class="footer-bottom">
        <p style="text-align: center; margin-bottom: 15px;">{{$t('FooterCopyright')}}</p>
        <p>{{$t('FooterCopyrightText')}}</p>
      </div>
    </div>
  </div>
</template>
<script setup>
import { useRouter } from "vue-router";
const router = useRouter()
const handleClick = (url) => {
  const reg = new RegExp('http')
  if(reg.test(url)) {
    window.open(url, '_blank')
  }else{
    router.push(url)
  }
}
</script>